<template>
    <div class="room-actor-box">
        <div class="fields">
            <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
            <mt-field label="最小金币" placeholder="请输入下注最小金币" v-model="min"></mt-field>
            <mt-field label="最大金币" placeholder="请输入下注最大金币" v-model="max"></mt-field>
        </div>
        <div class="fields">
            <mt-radio
                    title="下单方式"
                    v-model="type"
                    :options="['随机下单', '偶数期号', '奇数期号', '每期']">
            </mt-radio>
        </div>
        <div class="btn">
            <mt-button class="addbtn" size="small" type="primary" @click="insertActor">添加</mt-button>
        </div>

        <div class="title">
            演员列表
        </div>

        <div class="admin-user-lists-box">
            <div class="lists">
                <item
                        v-for="(item, index) of lists"
                        border="1"
                        :key="index">
                    <div class="items">
                        <div class="info">
                            <div class="room">
                                <span>&#xe604;</span>
                                演员：{{item.user_name}}
                            </div>
                            <div class="type">
                                下单金币：{{item.min}} - {{item.max}}
                            </div>
                            <div class="type">
                                下单方式：{{typeToText(item.type)}}
                            </div>
                        </div>
                        <div class="del">
                            <span @click="del(index)">&#xe64b;</span>
                        </div>
                    </div>
                </item>
            </div>
            <next-page
                    :loading="loading"
                    :more="full"
                    :data="lists.length===0"
                    @more="loadMore"></next-page>

        </div>
    </div>
</template>tgh

<script>
    import apiUrl from '@/api/apiUrl'
    import {Toast} from 'mint-ui'
    import nextPage from '@/components/nextPage'
    import Item from '@/components/item'
    export default {
        name: "index",
        data () {
            return {
                username: '',
                min: 1,
                max: 200,
                lists: [],
                loading: false,
                full: false,
                page: 1,
                row: 20,
                keywords: '',
                search: false,
                timer: null,
                type: '随机下单'
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        components:{
            nextPage,
            Item
        },
        methods: {
            del(k) {
                let params = {
                    params: {
                        id: this.lists[k].id
                    }
                }
                this.$http.get(apiUrl.room.delActors, params).then(res => {
                    if (res.data.code === 0) {
                        this.lists.splice(k, 1)
                        Toast('删除成功')
                    } else {
                        Toast('删除失败')
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            typeToText(type) {
                switch (parseInt(type)) {
                    case 1:
                        type = '随机下单'
                        break
                    case 2:
                        type = '偶数期号'
                        break
                    case 3:
                        type = '奇数期号'
                        break
                    default:
                        type = '每期'
                        break
                }
                return type
            },
            insertActor() {
                if (!this.username) {
                    return Toast('用户名不能为空')
                }
                let type = 1
                switch (this.type) {
                    case '随机下单':
                        type = 1
                        break
                    case '偶数期号':
                        type = 2
                        break
                    case '奇数期号':
                        type = 3
                        break
                    default:
                        type = 4
                        break
                }
                let params = new URLSearchParams()
                    params.append('room_id', this.$route.query.room_id)
                    params.append('user_name', this.username)
                    params.append('type', type)
                    params.append('min', this.min)
                    params.append('max', this.max)
                this.$http.post(apiUrl.room.addActor, params).then(res => {
                    if (res.data.code === 0) {
                        this.username = ''
                        this.lists.unshift(res.data.result)
                        Toast('添加成功')
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            loadMore() {
                if (this.lists.length < this.row) {
                    this.loading = false
                } else {
                    this.loading = true
                    this.$set(this, 'page', this.page + 1)
                    this.setData(this.page, this.row, res => {
                        this.loading = false;
                        if (res.length === 0) {
                            this.$set(this, 'full', true)
                        }
                    })
                }
            },
            setData (page = 1, row = 20, fun = null) {
                let params = {
                    params: {
                        page: page,
                        row: row,
                        room_id: this.$route.query.room_id
                    }
                }
                this.$http.get(apiUrl.room.actors, params).then(res => {
                    if (res.data.code === 0) {
                        this.$set(this, 'lists', this.lists.concat(res.data.result))
                        if (fun !== null) {
                            fun(res.data.result)
                        }
                        if (res.data.result.length < 20) {
                            this.full = true
                        }
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .title {
        height: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: @big;
        color: @gray;
    }
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        .addbtn {
            width: 80%;
        }
    }
    .items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .type {
            color: @gray;
        }
    }
</style>